<template>
    <div>
        <div class="tabs">
            <!-- <router-link :class="{'active':route == 'release'}" :to="{name:'release'}">待审核</router-link>
            <router-link :class="{'active':route == 'approved'}" :to="{name:'approved'}">已过审</router-link>
            <router-link :class="{'active':route == 'not_approved'}" :to="{name:'not_approved'}">未过审</router-link> -->
            <router-link :class="{'active':route == 'signing'}" :to="{name:'signing'}">报名中</router-link>
            <router-link :class="{'active':route == 'doing'}" :to="{name:'doing'}">进行中</router-link>
            <router-link :class="{'active':route == 'end'}" :to="{name:'end'}">已完成</router-link>

        </div>
        <div>
            <router-view></router-view>
        </div>

        <div @click="task_edit" href="javascript:;" class="edit_button">
            <div>
               <a><i class="zx-icon">&#xe6ba;</i></a>
            </div>
        </div>
    </div>
</template>
<script>

    export default {
        data(){
          return{
              screenWidth: document.body.clientWidth, // 屏幕尺寸

              width: 0,
              height: 0,
              x: 0,
              y: 0
          }
        },
        mounted(){
            console.log(document.body.clientHeight)
            console.log(document.body.clientWidth)

        },
        created(){
            document.body.style.backgroundColor='rgb(239, 243, 246)'
            this.route = this.$route.name;
        },
        watch:{
            $route(){
                console.log(this.$route.name)
                this.route = this.$route.name
            }
        },
        methods:{
            task_edit(){
                let uid = ''
                if(localStorage.getItem('user')){
                    uid = JSON.parse(localStorage.getItem('user')).uid;
                };
                if(!uid){
                    this.$dialog.confirm({
                        title: '消息提醒',
                        message: '发布任务需要登录后才能操作,现在就去登录?'
                    }).then(() => {
                        this.$router.push({name:'home'})
                         console.log('确认')

                    }).catch(() => {
                        // on cancel
                        console.log('取消')
                    });
                    return;
                }
              this.$router.push({path:'/task_edit'})
            },
            onResize: function (x, y, width, height) {
                this.x = x
                this.y = y
                this.width = width
                this.height = height
            },
            onDrag: function (x, y) {
                this.x = x
                this.y = y
            }
        }

    }
</script>
<style lang="less" scoped>
    @import url('../../public/css/release.less');
    .vdr.active:before{
        outline: none;
    }
    .edit_button{
        cursor: pointer;
        position: fixed;
        right: 20px;
        bottom: 130px;
        border: 1px solid #366df0;
        width: 50px;
        height: 50px;
        background: #366df0;
        color: #fff;
        font-size: 18px;
        text-align: center;
        line-height: 50px;
        border-radius: 25px;
        i{
            font-size: 28px;
        }
        a{
            color: #fff;
        }

    }
</style>
